<template>
  <el-dialog width="500px" title="批量新增" :visible="value" @close="close">
    <div class="box">
      <i class="el-icon-upload" style="font-size: 50px;color: #ccc" />

      <el-button type="text" @click="handleDownload">下载excel模板</el-button>

      <!--
          文件选择框就是丑  就是丑  就是丑

          改不了的
            1. 藏起来  style="display: none;"
            2. 准备一个好看的按钮 利用它"打中"隔壁藏着的文件选择框即可
        -->
      <el-button type="text" @click="$refs.file.click()">上传excel</el-button>

      <!-- 原生标签 文件选择框 => 打开系统文件 选择文件 -->
      <!--
        accept原生属性 直接决定文件类型

        原生事件
         change  文件选择框的值变化时(选择文件)触发
       -->
      <input
        ref="file"
        type="file"
        accept=".xlsx"
        style="display: none;"
        @change="handleChange"
      >
    </div>

    <template #footer>
      <el-button size="mini" type="primary" @click="close">取消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { getTemplateData, uploadExcel } from '@/api/employess'
import fileSaver from 'file-saver'
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 关闭对话框
    close() {
      this.$emit('input', false)
    },
    // 下载模板
    async handleDownload() {
      // 请求后端接口(封装接口指定类型为blob  拦截器已处理)
      const res = await getTemplateData()
      // file-saver 下载文件(需要二进制文件流数据)
      // console.log(res)
      fileSaver.saveAs(res, '导入模板.xlsx')
    },
    // 监听选择文件
    async  handleChange(e) {
      // e.target当前dom 元素
      if (e.target.files.length > 0) {
        console.log(e.target.files[0])// 选中的文件
        try {
          await uploadExcel(e.target.files[0])
          this.$message.success('导入成功')
          this.close()
          this.$emit('refresh')// 给父组件说要重新渲染
        } finally {
          this.$refs.file.value = ''
        }
      }
    }
  }

}
</script>

<style lang="sass" scoped>
.box
  display: flex
  flex-direction: column
  width: 360px
  height: 180px
  border: 2px dashed #ccc
  justify-content: center
  border-radius: 10px
  margin: 0 auto
  align-items: center

</style>
